<div class="content-section introduction">
    <div>
        <span class="feature-title">Get Started</span>
        <span>PrimeNG is a rich set of open source native Angular UI components.</span>
    </div>
</div>

<div class="content-section documentation">
    <h3 style="margin-top:0px">Download</h3>
    <p>PrimeNG is available at npm, if you have an existing application run the following command to download it to your project.</p>
<pre>
<code class="language-markup" pCode ngNonBindable>
npm install primeng --save
npm install primeicons --save
</code>
</pre>

    <h3>Load Configuration</h3>
    <p>PrimeNG is distributed in commonjs format, a module manager of your choice is required and this guide provides samples for SystemJS, WebPack and Angular CLI.</p>

    <h3>Import</h3>
    <p>UI components are configured as modules, once PrimeNG is downloaded and configured, modules and apis can be imported from 'primeng/*' shorthand in your application code. Documentation
        of each component states the import path.
    </p>
<pre>
<code class="language-typescript" pCode ngNonBindable>
import &#123;AccordionModule&#125; from 'primeng/accordion';     //accordion and accordion tab
import &#123;MenuItem&#125; from 'primeng/api';                 //api
</code>
</pre>

    <h3>Dependencies</h3>
    <p>Majority of PrimeNG components (95%) are native and there are some exceptions having 3rd party dependencies. In addition, components require <a href="https://www.npmjs.com/package/primeicons">PrimeIcons</a> for icons.</p>

    <p>The css dependencies are as follows, Prime Icons, theme of your choice and structural css of components.</p>

<pre>
<code class="language-html" pCode ngNonBindable>
&lt;link rel="stylesheet" type="text/css" href="/node_modules/primeicons/primeicons.css" /&gt;
&lt;link rel="stylesheet" type="text/css" href="/node_modules/primeng/resources/themes/nova-light/theme.css" /&gt;
&lt;link rel="stylesheet" type="text/css" href="/node_modules/primeng/resources/primeng.min.css" /&gt;
</code>
</pre>
    
    <p>Here is the list of components with 3rd party dependencies.</p>

    <div class="doc-tablewrapper">
        <table class="doc-table">
            <thead>
                <tr>
                    <th>Component</th>
                    <th>Dependency</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Schedule</td>
                    <td>FullCalendar 4.0.0-alpha.2</td>
                </tr>
                <tr>
                    <td>Editor</td>
                    <td>Quill Editor</td>
                </tr>
                <tr>
                    <td>GMap</td>
                    <td>Google Maps</td>
                </tr>
                <tr>
                    <td>Charts</td>
                    <td>Charts.js 2.7.x</td>
                </tr>
                <tr>
                    <td>Captcha</td>
                    <td>Google Recaptcha</td>
                </tr>
            </tbody>
        </table>
    </div>

    <h3>Animations</h3>
    <p>Various components utilize angular animations to improve the user experience, starting with Angular 4 animations have their own module so you need
    to import <i>BrowserAnimationsModule</i> to your application. If you prefer to disable animations globally, import <i>NoopAnimationsModule</i> instead.</p>

<pre>
<code class="language-markup" pCode ngNonBindable>
npm install @angular/animations --save
</code>
</pre>

<pre>
<code class="language-typescript" pCode ngNonBindable>
import &#123;BrowserModule&#125; from '@angular/platform-browser';
import &#123;BrowserAnimationsModule&#125; from '@angular/platform-browser/animations';

@NgModule(&#123;
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        //...
    ],
    //...
&#125;)
export class YourAppModule &#123; &#125;
</code>
</pre>

    <h3>Angular CLI Integration</h3>
    <p>Angular CLI is the official CLI tool for Angular. We strongly suggest using Angular CLI when starting an Angular project.</p>

    <h4>Dependencies</h4>
    <p>Add PrimeNG and PrimeIcons as dependencies.</p>
<pre>
<code class="language-js" pCode ngNonBindable>
"dependencies": &#123;
  //...
  "primeng": "^7.0.0",
  "primeicons": "^1.0.0"
&#125;,
</code>
</pre>

    <h4>Styles Configuration</h4>
    <p>Configure required styles at the styles section, example below uses the Nova Light theme.</p>
<pre>
<code class="language-js" pCode ngNonBindable>
"styles": [
  "node_modules/primeicons/primeicons.css",
  "node_modules/primeng/resources/themes/nova-light/theme.css",
  "node_modules/primeng/resources/primeng.min.css",
  //...
],
</code>
</pre>

    <p>That is all, you may now import PrimeNG components, for a working example visit the <a href="https://github.com/primefaces/primeng-quickstart-cli">PrimeNG CLI QuickStart</a> sample at GitHub.</p>

</div>
